<template>
  <div class="HidePage flip-horizontal-bottom">
    Element
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped>
.HidePage {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('@/assets/index/hideBackground.jpg');
  background-size: cover;
  background-position: center;
  color: white;
}

.flip-horizontal-bottom {
  -webkit-animation: flip-horizontal-bottom .5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
  animation: flip-horizontal-bottom .5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

@-webkit-keyframes flip-horizontal-bottom {
  0% {
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
  }

  100% {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
  }
}

@keyframes flip-horizontal-bottom {
  0% {
    -webkit-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
  }

  100% {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
  }
}
</style>
